import React from "react";
// import Swhter from "../swhter/swhter";
// import { Carousel } from "antd";
import { Pagination } from 'antd';
import BackToTopAndHelp from '../FH/fh';
import './Modulmb.css'
const images = [
  'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/8633_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40266/1672_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/4797_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/7377_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40266/9994_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40266/1673_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/4797_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/7377_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40266/9994_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/8381_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/8311_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/9006_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/4797_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40266/1672_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/4797_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/4797_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/8381_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/8311_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40269/8311_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/9006_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40267/0041_list.jpg!/fw/431/clip/0x300a0a0',
  'https://img95.699pic.com/desgin_photo/40268/4797_list.jpg!/fw/431/clip/0x300a0a0',
];
const columns = [];
for (let i = 0; i < images.length; i += 3) {
  columns.push(images.slice(i, i + 14));
}

function Modulmb() {
  return (
    <div>
      <div className='box'>
        <div className='box1'>
          <ul>
            <li className='apm1'>分类:</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li className='apm1'>场景</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>海报</li>
            <li className='apm1'>用途:</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li className='apm1'>行业:</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
            <li>公众号首页</li>
            <li>海报</li>
            <li>公众号</li>
          </ul>
        </div>
        <div className='waterfall'>
          {columns.map((column, index) => (
            <div className="column" key={index}>
              {column.map((image, idx) => (
                <div className="image-wrapper" key={idx}>
                  <img src={image} alt="image" />
                </div>
              ))}
            </div>
          ))}

        </div>
        <Pagination
          total={85}
          showSizeChanger
          showQuickJumper
        />
        <BackToTopAndHelp />
      </div>
    </div>
  );
}

export default Modulmb;
